何荣 / 项目档案

Appearance

uni-app Vue 在鸿蒙上如何运行？编译、运行时与原生能力 ​

一句话：不是鸿蒙「直接认识 Vue」，而是 uni-app 把 Vue 页面编译、打包进鸿蒙应用，并带上自己的运行时适配层。

本文是 uni-app 鸿蒙端运行原理说明，与 移动端打包签名与 DCloud 离线打包教程（构建与签名流程）互补。

一、三层结构 ​

原理可以理解成三层：

1. 源码层 ​

你写的是 .vue：template + script + style。

里面的 view、button、scroll-view、uni.request 等 不是纯浏览器 API，而是 uni-app 的跨端抽象——同一套写法面向小程序、App、H5、鸿蒙等多端。

2. 编译和打包层 ​

HBuilderX 会把项目编译成鸿蒙目标产物，并生成/合并到鸿蒙工程目录，例如：

  • unpackage/dist/dev/app-harmony
  • unpackage/dist/build/app-harmony

再调用 DevEco / HarmonyOS 工具链完成构建、签名、安装。

DCloud 官方文档说明：HBuilderX 4.24+ 开始支持运行到鸿蒙平台，并会调用鸿蒙工具链完成构建安装。

3. 运行时层 ​

普通 uni-app Vue 页面在鸿蒙里主要靠 JSVM + Web/ArkWeb 渲染环境 + uni 运行时 跑起来：

层次作用
Vue 逻辑运行在 JS 环境里
页面渲染通过鸿蒙的 Web 能力（ArkWeb）承载
uni 运行时负责组件、路由、生命周期、API 适配
鸿蒙原生能力普通 JS 不能直接调 @kit，需通过 UTS 插件；UTS 编译成 ArkTS/ETS 调用鸿蒙原生 API

参考：

二、整体链路 ​

text
Vue 页面
  ↓ uni 编译器
JS / CSS / 资源 + uni 运行时
  ↓ HBuilderX + DevEco 工具链
鸿蒙 HAP 应用
  ↓
鸿蒙 JSVM / ArkWeb / ArkTS 插件能力

三、关键区别：普通 uni-app ≠ ArkUI 原生页 ​

要注意：普通 uni-app 页面不是等价于鸿蒙 ArkUI 原生页面。

DCloud 文档也提到：

  • 鸿蒙端 只支持 Vue 3
  • nvue 到鸿蒙后 也不是原生渲染，而是类似 Web 渲染

详见 运行到鸿蒙平台。

四、uni-app x / uvue：更偏原生的一条路 ​

如果是 uni-app x / uvue，路线又更「原生」一些。

DCloud 的说法是：uvue 渲染引擎包含 UTS 版 Vue 框架、跨平台基础 UI 和 CSS 引擎，可以把 Vue 语法页面 编译成不同平台的高性能原生界面。

与普通 uni-app 对比：

维度普通 uni-app（Vue）uni-app x（uvue）
鸿蒙渲染Web/ArkWeb 为主更偏原生 UI 编译
性能敏感 UI受 Web 层限制更适合高性能原生界面
学习/迁移成本现有 Vue 项目可直接跑需按 uvue 规范改造

五、放到图表项目里的结论 ​

结合 futures-uniapp-client 这类行情/图表项目，实践建议是：

场景建议
普通业务页（列表、表单、设置、登录）用 uni Vue 跑鸿蒙 没问题
高频图表、十字光标、缩放拖拽、实时 K 线不应让 Uni 层持续驱动；宜做 页面级原生行情详情页

这也符合当前项目规则：

  • UniApp 只做页面入口
  • 不做图表级持续桥接（避免 JS ↔ 原生高频通信成为性能瓶颈）

原生行情页由鸿蒙侧（ArkUI + 自绘/原生图表引擎）承载交互与刷新；Uni 层只负责路由跳转、参数传递、返回列表等「入口级」职责。

六、一句话总结 ​

鸿蒙不认识 Vue 语法本身，认识的是 uni-app 编译出的 HAP + 运行时。
普通页 = JSVM + ArkWeb + uni 适配；要 @kit 原生能力 = UTS 插件。
图表/K 线这类重交互页，入口用 Uni，渲染与驱动用原生。

系列导航

本站总访问 — 次